<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cart{
            width: 200px;
            /* height: 200px; */
            border: 1px solid red;
        }
        #cart .mycart{
            border: 3px solid green;
        }
        #cartInfo{
            border: 1px solid black;
            
        }
        .show{
            display: block;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div id="cart" >
        <div class="mycart" onmouseenter="showInfo()" onmouseleave="hideInfo()">我的购物车</div>
        <div id="cartInfo" class="hide">
            
            <dl>
                <dt>最新加入的商品</dt>
                <dd>商品1</dd>
                <dd>商品1</dd>
                <dd>商品1</dd>
            </dl>
        </div>
    </div>
    <script>
        function showInfo() {
            let el =  document.getElementById("cartInfo");
            el.style.transition='all 100ms'
            el.className = 'show'
            console.log(window.getComputedStyle(el,null));

            console.log(document.defaultView.getComputedStyle(el,null));
        }
        function hideInfo() {
            document.getElementById("cartInfo").className = 'hide'
        }
    </script>
</body>
</html>